<template>
  <div class="page-x">
    <div class="g6-x" id="containerG6"></div>
  </div>
</template>

<script>
import G6 from '@antv/g6'

export default {
  name: 'Started',
  data() {
    return {
      gplot: null, // 拓扑图实例
      gplotData: {
        // 点集
        nodes: [
          {
            id: 'node1', // String，该节点存在则必须，节点的唯一标识
            x: 50, // Number，可选，节点位置的 x 值
            y: 50, // Number，可选，节点位置的 y 值
          },
          {
            id: 'node2',
            x: 250,
            y: 50,
          },
          {
            id: 'node3',
            x: 250,
            y: 250,
          },
          {
            id: 'node4',
            x: 50,
            y: 250,
          }
        ],
        // 边集
        edges: [
          {
            source: 'node1', // String，必须，起始点 id
            target: 'node2', // String，必须，目标点 id
          },
          {
            source: 'node2',
            target: 'node3',
          },
          {
            source: 'node3',
            target: 'node4',
          },
          {
            source: 'node4',
            target: 'node1',
          },
        ]
      }
    }
  },
  methods: {
    drawing() {
      this.gplot = new G6.Graph({
        container: containerG6, // String | HTMLElement，必须，容器 id 或容器本身
        width: 800, // 设置画布宽度。 Number，必须
        height: 500, /// 设置画布高度。Number，必须
        // 交互模式 https://g6.antv.vision/zh/docs/manual/middle/states/mode
        modes: {
          // 内置 Behavior https://g6.antv.vision/zh/docs/manual/middle/states/defaultBehavior#%E5%86%85%E7%BD%AE-behavior
          default: ['zoom-canvas', 'drag-canvas', 'drag-node', 'brush-select']
        },
        nodeStateStyles: {
          // 鼠标经过到节点上
          hover: {
            fill: 'yellow'
          },
          // 鼠标点击节点
          click: {
            stroke: 'red',
            lineWidth: 3
          }
        }
      })

      /**
       * graph.read(data)
       * 接收数据，并进行渲染，read 方法的功能相当于 data 和 render 方法的结合。
       * 官方文档：https://g6.antv.vision/zh/docs/api/graphFunc/data#graphreaddata
       * 
       * 等同于
       * graph.data(data.value)
       * graph.render()
       */
      this.gplot.read(this.gplotData)

      // this.gplot.on('元素:事件名', event => {})

      // 点击画布事件
      this.gplot.on('canvas:click', event => {
        // console.log(event)

        // 点击画布时，取消所有节点样式
        const nodes = this.gplot.findAllByState('node', 'click')
        nodes.forEach(node => {
          this.gplot.setItemState(node, 'click', false)
        })
      })

      // 点击节点事件
      this.gplot.on('node:click', event => {
        // console.log(event)

        // 先取消其他节点样式
        const nodes = this.gplot.findAllByState('node', 'click')
        nodes.forEach(node => {
          this.gplot.setItemState(node, 'click', false)
        })

        // 设置当前被点击节点的样式
        this.gplot.setItemState(event.item, 'click', true)
      })

      // 鼠标经过节点事件
      this.gplot.on('node:mouseenter', event => {
        // console.log(event)
        this.gplot.setItemState(event.item, 'hover', true)
      })

      // 鼠标移除节点事件
      this.gplot.on('node:mouseleave', event => {
        // console.log(event)
        this.gplot.setItemState(event.item, 'hover', false)
      })
    }
  },
  mounted() {
    this.drawing()
  }
}
</script>

<style lang="scss" scoped>
.g6-x {
  width: 100%;
  height: 100%;
}
</style>